import React from 'react'
import { NavBar, InputItem, WhiteSpace, List, TextareaItem, Button, Toast } from 'antd-mobile'
import { createForm } from 'rc-form'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'

import { update } from '@/redux/User.redux'
import AvatarSelector from '@/components/AvatarSelector'

@connect(
    state => state.user,
    { update }
)
class BossInformation extends React.Component{

    constructor(props){
        super(props)
        this.state = {
            avatar: ''
        }
        this.save = this.save.bind(this)
    }

    save(){
        const { form } = this.props
        form.validateFields({force: true}, (err, fields) => {
            if(err) return
            const { avatar } = this.state
            if(!avatar){
                Toast.fail('请选择头像', 1.2)
                return
            }
            this.props.update({avatar, ...fields})
        })
    }

    //招聘职位，职位薪资，公司名称，职位要求
    render(){
        const { form: {getFieldError, getFieldDecorator}, redirect, code } = this.props
        return (
            <div>
                { code === 0 && <Redirect to={redirect} /> }
                <NavBar
                    mode="dark"
                >基础信息</NavBar>
                <AvatarSelector getAvatar={ val => this.setState({ avatar: val })}/>
                <WhiteSpace/>
                <List>
                    {
                        getFieldDecorator('company',{
                            initialValue: '',
                            rules: [
                                { required: true, message: '公司名称不能为空' },
                            ],
                        })(
                            <InputItem
                                clear={true}
                                error={ !!getFieldError('company') }
                                onErrorClick={() => {
                                    Toast.fail(getFieldError('company')[0], 1.2)
                                }}
                            >公司名称</InputItem>
                        )
                    }
                    {
                        getFieldDecorator('title',{
                            initialValue: '',
                            rules: [
                                { required: true, message: '招聘职位不能为空' },
                            ],
                        })(
                            <InputItem
                                clear={true}
                                error={ !!getFieldError('title') }
                                onErrorClick={() => {
                                    Toast.fail(getFieldError('title')[0], 1.2)
                                }}
                            >招聘职位</InputItem>
                        )
                    }
                    {
                        getFieldDecorator('money',{
                            initialValue: '',
                            rules: [
                                { required: true, message: '职位薪资不能为空' }
                            ]
                        })(
                            <InputItem
                                clear
                                error={ !!getFieldError('money') }
                                onErrorClick={ () => {
                                    Toast.fail(getFieldError('money')[0], 1.2)
                                }}
                            >
                                职位薪资
                            </InputItem>
                        )
                    }
                    {
                        getFieldDecorator('desc', {
                            initialValue: '',
                            rules: [
                                { required: true, message: '职位要求不能为空' }
                            ]
                        })(
                            <TextareaItem
                                title="职位要求"
                                rows={3}
                                autoHeight
                                clear
                                error={ !!getFieldError('desc') }
                                onErrorClick={ () => {
                                    Toast.fail(getFieldError('desc')[0], 1.2)
                                }}
                            />
                        )
                    }
                </List>
                <WhiteSpace/>
                <Button type="primary" onClick={this.save}>保存</Button>
            </div>
        )
    }
}

export default createForm()(BossInformation)